<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div>vue双向绑定模拟</div>
    <div>
        <div>数据：<span id="data"></span></div>
        <input type="text" oninput="changeInput()" id="input"/>
    </div>
</body>
<script>
    let info = {
        name: ''
    }

    var val = ""

    Object.defineProperty(info, 'name', {
        get() {
            console.log('获取info的name值')
            return val
        },
        set() {
            console.log('设置info的name值')
            let data = document.getElementById("data")

            console.log(data)

            data.innerHTML = info.name
        }
    })

    function changeInput(){
        let inputVal = document.getElementById('input').value
        
        val = inputVal
        info.name = inputVal

        console.log(info)
    }


    let info = {
        name: 'dmc',
        age: 20
    }

    let infoProxy = new Proxy(info, {
        get(target, key) {
            console.log('获取对象属性')
            return target[key]
        },
        set(target, key, newValue) {
            console.log('设置对象属性')
            target[key] = newValue

            let data = document.getElementById("data")

            data.innerHTML = info.name
        },
        has(target, key) {
            console.log('触发has捕获器')
        }
    })


    infoProxy.name = 6666
    console.log(infoProxy.name)

    function changeInput(){
        let inputVal = document.getElementById('input').value
        
        infoProxy.name = inputVal

    }
</script>
</html>